<template>
  <nav
    class="flex container px-4 text-black text-xs sm:text-sm my-4 sm:my-10"
    aria-label="Breadcrumb"
  >
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: toPath }"
        >{{ title }}
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="details">{{ details }}</el-breadcrumb-item>
    </el-breadcrumb>
  </nav>
</template>

<script>
export default {
  props: ["title", "details", "toPath"],
};
</script>

<style>
#app .el-breadcrumb__item {
  float: none;
}
</style>
